<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Thymeleaf tutorial: exercise 9</title>
        <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>Thymeleaf tutorial - Answer for exercise 9: more on conditions</h1>
        <h2>Customer list</h2>
        <table>
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Gender</th>
                    <th>Payment method</th>
                    <th>Balance</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="customer : ${customerList}">
                    <td th:text="${customer.firstName}">Peter</td>
                    <td th:text="${customer.lastName}">Jackson</td>
                    <!-- 
                       Use th:switch for selecting content based on ${customer.gender}.
                       As genre can be null if unknown, better use ${customer.gender?.name()}
                       for obtaining its name.
                    -->
                    <td>
                        <img alt="Male" /> <!-- Use "/male.png" image -->
                        <img alt="Female" /> <!-- Use "/female.png" image -->
                        <span>Unknown</span>
                    </td>
                    <td>
                        <span th:text="${customer.paymentMethod.description}">Direct debit</span>
                        <!-- Show next message only when paymentMethod is not CREDIT_CARD -->
                        <span class="warn">
                            Payment must be done in the next 4 days
                        </span>
                    </td>
                    <!-- Add class="enhanced" when balance is greater than 10000 -->
                    <td th:text="${customer.balance}">350</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
